<template>
	<view class="Navbar" :class="isIos ? 'ios' : 'android'">
		<view class="N_inner" :style="{'background': background}">
			<view class="N_iFloor" :style="{'height': Number(navBarHeight) + statusBarHeight + 'px', 'background': floorBg, 'opacity': floorOpacity, 'transition': floorTransition}" v-if="isFloor"></view>
			<view class="N_iContain">
				<!-- 状态栏 -->
				<view class="N_iStatus" :style="{'height': statusBarHeight + 'px'}"></view>
				<!-- 导航栏 -->
				<view class="N_iNav" :style="{'height': navBarHeight + 'px'}">
					<!-- 标题 -->
					<view class="N_iTit" v-if="title" :style="{'color': color, 'padding': '0 ' + rightWidth + 'px'}">
						<view class="N_itTxt">{{title}}</view>
					</view>
					<view class="N_iCan" :style="{'padding-right': rightWidth + 'px'}">
						<view class="N_iLeft" v-if="isBack">
							<view class="N_iBack" :style="{'color': backColor}" @tap="toBack"><view class="iconfont icon-go"></view></view>
						</view>
						<view class="N_iCenter">
							<slot name="center" v-if="!title"></slot>
						</view>
						<view class="N_iRight">
							<slot name="right"></slot>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="N_place" :style="{'height': Number(navBarHeight) + statusBarHeight + 'px'}" v-if="isPlace && isPlace !== 'false'"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: 25,      // 状态栏高度
			navBarHeight: 44,         // 导航栏高度
			navBarLeft: false,    
			rightWidth: 102,          // 胶囊 + 胶囊右边距
			home:false,
		}
	},
	
	props: {
		title: { type: String, default: '' }, 
		color: { type: String, default: '#333' },
		background: { type: String, default: '#fff' },
		isBack: { type: [Boolean, String], default: false },
		backColor: { type: String, default: "#333" },
		customBack: { type: Function, default: null },          // 自定义返回逻辑
		isFloor: { type: [Boolean, String], default: false },   // 底层，用于做背景渐变且不影响导航栏内容
		floorBg: { type: String, default: '#fff' },
		floorOpacity: { type: [Number, String], default: 1 },
		floorTransition: { type: String, default: 'all .3s' },
		isPlace: { type: [Boolean, String], default: true },    
	},
	
	created() {
		let pages = getCurrentPages();//当前页
		if(pages.length==1){
			this.home = true
		}
		let systemInfo =  uni.getSystemInfoSync()   // 获取系统信息
		let isIos = systemInfo.platform.toLowerCase() == "ios" ? true : false
		this.isIos = isIos
		this.statusBarHeight = systemInfo.statusBarHeight
		this.navBarHeight = isIos ? 44 : 48     // ios 44px  android 48px
		this.$store.commit('system/SET_SYSTEMINFO', systemInfo)
		this.$store.commit('system/SET_NAVBARHEIGHT', this.navBarHeight + this.statusBarHeight)
		
		// 获取胶囊信息
		// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
		let rect = this.$store.state.system.rect || uni.getMenuButtonBoundingClientRect()  // 胶囊信息
		if(rect){
			if (rect.left > 0) {
				this.rightWidth = systemInfo.windowWidth - rect.left
				this.$store.commit('system/SET_RECT', rect)
			}
			// 获取胶囊信息失败 => 200ms后重新获取
			if (!rect || !rect.left ) {
				setTimeout(() => {
					
					rect = uni.getMenuButtonBoundingClientRect()
					
					if (rect.left > 0) {
						this.rightWidth = systemInfo.windowWidth - rect.left
						this.$store.commit('system/SET_RECT', rect)
					}
				}, 200)
			}
			
		}
		// #endif
	},
	
	methods: {
		toBack() {
		  if(this.home){
			 uni.switchTab({
			 	url:'/pages/home/index/index'
			 })
		  }else{
			if (typeof this.customBack === 'function') {
				// 在微信，支付宝等环境(H5正常)，会导致父组件定义的customBack()函数体中的this变成子组件的this
				// 通过bind()方法，绑定父组件的this，让this.customBack()的this为父组件的上下文
				this.customBack.bind(this.$u.$parent.call(this))()
			} else {
				uni.navigateBack()
			}   
		  }	
		}
	}
}
</script>

<style lang="scss">
$ios-navbar-height: 44px;
$android-navbar-height: 48px;

.Navbar {position: relative;z-index: 500;
	&.ios .N_place, &.ios .N_iNav {height: $ios-navbar-height;}
	&.android .N_place, &.android .N_iNav {height: $android-navbar-height;}
	.N_inner {width: 100%;position: fixed;top: 0;left: 0;box-sizing: border-box;}
	.N_iFloor {width: 100%;position: absolute;left: 0;right: 0;z-index: 1;opacity: 0;}
	.N_iContain {position: relative;z-index: 2;}
	.N_iStatus {width: 100%;}
	.N_iNav {width: 100%;height: 100%;position: relative;}
	.N_iTit {width: 100%;height: 100%;font-size: 32rpx;font-weight: bold;padding: 0 102px;box-sizing: border-box;position: absolute;top: 0;left: 0;display: flex;justify-content: center;align-items: center;
		.N_itTxt {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
	}
	.N_iCan {width: 100%;height: 100%;padding-right: 102px;box-sizing: border-box;display: flex;align-items: center;box-sizing: border-box;}	
	.N_iLeft {height: 100%;position: relative;display: flex;align-items: center;
		.N_iBack {width: 104rpx;height: 100%;color: #333;font-size: 40rpx;display: flex;justify-content: center;align-items: center;}
	}
	.N_iCenter {position: relative;overflow: hidden;display: flex;align-items: center;justify-content: center;flex: 1;}
	.N_iRight {}
	.N_place {height: 44px;}
}



</style>
